<script setup>
import { ref, watch } from 'vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { useAirStore, usePopStore } from '@/stores'
import { hangarDetailServer } from '@/api'
import { storeToRefs } from 'pinia'
const airStore = useAirStore()
const popStore = usePopStore()
const { FocusAirId, operationData } = storeToRefs(airStore)
const { Jc } = storeToRefs(popStore)
const navBar = ref('无人机列表')
const navList = ref(['无人机列表', '机库列表'])
const list = ref([])
const hangarList = ref([])
const changeNav = (item) => {
  navBar.value = item
  list.value = operationData.value.uavList
  hangarList.value = operationData.value.hangarList
}

const currentId = ref('')
const focusAir = (item) => {
  if (currentId.value == item.name) {
    currentId.value = ''
    __g.customObject.focus('air-' + item.name, 2000)
    FocusAirId.value = item.name
  } else {
    currentId.value = item.name
    __g.customObject.focus('air-' + item.name, -1)
    FocusAirId.value = item.name
  }
}

const lookDetail = async (item) => {
  Jc.value.showPop = true
  const res = await hangarDetailServer({ platformId: item.platformId })
  popStore.Jc.showPop = true
  popStore.Jc.popInfo = res.data
}

watch(operationData, (val) => {
  list.value = val.uavList.reverse()
})
</script>
<template>
  <div class="card">
    <div class="conbox">
      <div class="navbox">
        <p
          v-for="(item, index) in navList"
          :key="index"
          :class="{ active: navBar === item }"
          @click="changeNav(item)"
        >
          {{ item }}
        </p>
      </div>
    </div>
    <div class="table" v-if="navBar === '无人机列表'">
      <ul class="tbody">
        <vue3-seamless-scroll
          :list="list"
          :step="0.3"
          :hover="true"
          :isRemUnit="true"
          :wheel="true"
          :delay="3"
          :limitScrollNum="6"
        >
          <li>
            <p class="name">
              <el-tooltip effect="dark" content="DJ202410319005" placement="top">
                <span class="content">DJ202410319005</span>
              </el-tooltip>
            </p>
            <p>
              <span class="state">状态</span>
              <span class="success"></span>
            </p>
            <p class="d-f">
              <span class="yes"></span>
              <span class="on-line">在线</span>
            </p>
          </li>
          <li v-for="(item, index) in list" :key="index" @click="focusAir(item)">
            <p class="name">
              <el-tooltip effect="dark" :content="item.name" placement="top">
                <span class="content">{{ item.name }}</span>
              </el-tooltip>
            </p>
            <p>
              <span class="state">状态</span>
              <span class="success" v-if="item.status == '1'"></span>
              <span class="error" v-else></span>
            </p>
            <p class="d-f">
              <span class="yes" v-if="item.status == 1"></span>
              <span class="no" v-else></span>
              <span class="on-line" v-if="item.status == '1'">在线</span>
              <span class="off-line" v-else>离线</span>
            </p>
          </li>
        </vue3-seamless-scroll>
      </ul>
    </div>

    <div class="table" v-else>
      <ul class="thead">
        <li>名称</li>
        <li>状态</li>
        <li>航线占用</li>
        <li>停靠无人机</li>
      </ul>
      <ul class="tbody">
        <vue3-seamless-scroll
          :list="hangarList"
          :step="0.3"
          :hover="true"
          :isRemUnit="true"
          :wheel="true"
          :delay="3"
          :limitScrollNum="6"
        >
          <li v-for="(item, index) in hangarList" :key="index" @click="lookDetail(item)">
            <p class="name">
              <el-tooltip effect="dark" :content="item.name" placement="top">
                <span class="content">{{ item.name }}</span>
              </el-tooltip>
            </p>
            <p class="d-f">
              <span class="on-line" v-if="item.status == 0">在线</span>
              <span class="off-line" v-else>离线</span>
            </p>
            <p>
              <span>{{ item.skipLineLocked == 1 ? '占用' : '未占用' }}</span>
            </p>
            <p class="name">
              <el-tooltip effect="dark" :content="item.latestParkDrone" placement="top">
                <span class="content">{{ item.latestParkDrone }}</span>
              </el-tooltip>
            </p>
          </li>
        </vue3-seamless-scroll>
      </ul>
    </div>
  </div>
</template>
<style scoped lang="scss">
.card {
  margin-top: 15px;
  .conbox {
    padding: 2px 15px 10px;
    .navbox {
      display: flex;
      align-items: center;

      p {
        flex: 1;
        padding: 5px 0 10px;
        font-size: 15px;
        opacity: 0.7;
        text-align: center;
        cursor: pointer;
        background: left bottom url('@img/overview/navbar.png') no-repeat;
        background-size: 100% 3px;

        &.active {
          opacity: 1;
          position: relative;
          background: -10px 25px url('@img/overview/navbar_active.png') no-repeat;
          background-size: 120% 20px;

          &::before {
            position: absolute;
            top: 15px;
            left: 0;
            width: 7px;
            height: 7px;
            content: '';
            background: url('@img/overview/arrow_left.png');
            background-size: 100% 100%;
          }

          &::after {
            position: absolute;
            top: 15px;
            right: 0;
            width: 7px;
            height: 7px;
            content: '';
            background: url('@img/overview/arrow_right.png');
            background-size: 100% 100%;
          }
        }
      }
    }
  }
  .table {
    width: 100%;
    height: 380px;
    padding: 0 10px;

    .thead {
      width: 100%;
      height: 37px;
      display: flex;
      background: url('@img/infrastructure/table_header_bg.png');
      background-size: 100% 100%;

      li {
        flex: 1;
        line-height: 37px;
        text-align: center;
      }
    }

    .tbody {
      height: 355px;
      overflow: hidden;
      li {
        display: flex;
        height: 58px;
        line-height: 37px;
        border-bottom: 1px solid #0f496c;
        text-align: center;
        align-items: center;
        cursor: pointer;
        &:nth-child(odd) {
          background-color: rgba(15, 73, 108, 0.3);
        }

        P {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;

          .state {
            width: 40px;
            height: 18px;
            background: #a7b1bb;
            // opacity: 0.25;
            text-align: center;
            line-height: 15px;
            padding: 2px;
          }
          .success {
            display: block;
            width: 45px;
            height: 40px;
            background: url('@img/operation/success.png');
            background-size: 100% 100%;
            text-align: center;
            color: #fff;
            font-family:
              PingFangSC,
              PingFang SC;
            font-size: 12px;
            line-height: 20px;
          }
          .error {
            display: block;
            width: 40px;
            height: 40px;
            background: url('@img/operation/error-state-icon.png');
            background-size: 100% 100%;
            text-align: center;
            color: #fff;
            font-family:
              PingFangSC,
              PingFang SC;
            font-size: 12px;
            line-height: 20px;
          }
          .yes {
            display: block;
            width: 40px;
            height: 40px;
            background: url('@img/operation/yes-icon.png');
            background-size: 100% 100%;
            // text-align: center;
            color: #fff;
            font-family:
              PingFangSC,
              PingFang SC;
            font-size: 12px;
            margin-top: -5px;
            // line-height: 20px;
          }
          .no {
            display: block;
            width: 40px;
            height: 40px;
            background: url('@img/operation/no-icon.png');
            background-size: 100% 100%;
            text-align: center;
            color: #fff;
            font-family:
              PingFangSC,
              PingFang SC;
            font-size: 12px;
            line-height: 20px;
            margin-top: -10px;
          }
          .on-line {
            width: 37px;
            height: 18px;
            line-height: 18px;
            background: rgba(0, 255, 15, 0.25);
            border-radius: 4px;
            border: 1px solid #51ffb2;
            padding: 0 2px;
            margin-top: -8px;
          }
          .off-line {
            width: 33px;
            height: 18px;
            line-height: 18px;
            background: rgba(255, 0, 0, 0.25);
            border-radius: 4px;
            border: 1px solid #f77575;
            margin-top: -10px;
          }
        }
      }
      .d-f {
        display: flex;
        flex-direction: column;
      }
    }
  }
}
.name {
  width: 100px;
  .content {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 5px;
  }
}
.d-f {
  display: flex;
  flex-direction: column;
}
.yes {
  display: block;
  width: 40px;
  height: 40px;
  background: url('@img/operation/yes-icon.png');
  background-size: 100% 100%;
  // text-align: center;
  color: #fff;
  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 12px;
  // line-height: 20px;
}
.no {
  display: block;
  width: 40px;
  height: 40px;
  background: url('@img/operation/no-icon.png');
  background-size: 100% 100%;
  text-align: center;
  color: #fff;
  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 12px;
  line-height: 20px;
}
.on-line {
  width: 37px;
  height: 18px;
  line-height: 18px;
  background: rgba(0, 255, 15, 0.25);
  border-radius: 4px;
  border: 1px solid #51ffb2;
  padding: 0 2px;
  margin-top: -8px;
}
.off-line {
  width: 33px;
  height: 18px;
  line-height: 18px;
  background: rgba(255, 0, 0, 0.25);
  border-radius: 4px;
  border: 1px solid #f77575;
  margin-top: -8px;
}
</style>
